<template>
	<view class="content">
		<view class="wrap" v-if="list.length>0">
		   <u-swiper @click="hanldeSwiperClick" bg-color="rgb(245,247,249)" :effect3d="true" img-mode="scaleToFill" height="380" :border-radius="20" name="imgUrl" :list="list"></u-swiper>
		</view>
		<image class="home-banner" src="../../static/shop/home-banner.png"></image>
		<view class="contain-div" style="width: 100vw;">
		    <view class="contain-div-item" v-for="(item,index) in commodityList" :key="item.id">
				<image class="item-img" @click="goDetail(item.id)" :src="item.thumbnail"></image>
				<view class="item-name" @click="goDetail(item.id)">{{ item.name }}</view>
				<view class="item-price">
				   <view class="now-price">￥{{ item.price }}</view>
				   <view class="cost-price" v-if="item.price !== item.value">￥{{ item.value }}</view>
				   <view class="shopping-cart" @click="openSku(item.id)">
					   <image style="width: 50rpx; height: 50rpx;" src="../../static/shop/home-shop-cart.png"></image>
				   </view>
				</view>
			</view>
		</view>
		

	   <u-popup :mask-close-able="false" border-radius="54" mode="center" width="550rpx" height="300rpx"  v-model="showDialogUuid">
			<view class="content-title" >请先授权登录？</view>
			<view class="content-text">不登录无法正常体验！</view>
			<view class="btn-div">
				<view class="btn-cancle" @click="handleClickCancleUuid">取消</view>
				<view class="line-xian"></view>
				<button @click="bindgetuser"  class="content-button"   type="success">确定</button>
			</view>
	    </u-popup>
			
	   <ComponentDialog @cancle="handleClickCanclePhone" title="申请获取手机号" tips="授权手机号后方可使用小程序!" :show="showDialogPhone"></ComponentDialog>
		
		<sku
		  :show="showSku"
		  ref="sku"
		  @close="closePopup"
		  :isFromHome=true
		  @hanldeAddCar="hanldeAddCar"
		  @confirmOrder="confirmOrder"
		/>
		
	</view>
</template>

<script>
	import api from '../../untils/api.js'
	import ComponentDialog  from '../dialog.vue'
	import Sku from "../../components/sku.vue";
	export default {
		data() {
			return {
				showDialogPhone:false,
				showDialogUuid:false,
				size: 10,
				page: 0,
				iv:"",
				encryptedData:"",
				consultingData:[],
				pixelRatio:0,
				navList:[],
				openid:"",
				avatarUrl:"",
				nickName:"",
				phone:"",
				uUID:false,
				keyword:"",
				list: [],
				commodityList:[],
				showSku:false,
			}
		},
		components: {
		     ComponentDialog,
			 Sku,
		  },
		onPullDownRefresh() {
		    var obj={nowPage: 1,pageSize: 9999,parameters: {},startRecord: 0,
		     condition:{ oredCriteria:[[{compareOperator: "Equal",dataType: {type: "Number"},property: "state",queryType: "Equal",value: "1"}]]}
		     }
		   let p1= api.BIZ_BANNER_SELECT_LIST_BY_TYPE(JSON.stringify(3))
		   let p2= api.SM_WARES_LIST( JSON.stringify(obj) )
			Promise.all([p1, p2]).then((res) => {
				this.list=res[0].data.body
				this.commodityList=res[1].data.body.exhibitDatas
			  setTimeout(()=>{
				   uni.stopPullDownRefresh();
			  },1000);
			}).catch((error) => {
			  console.log(error)
			})
	      },
			onShareAppMessage(res) {
			   return {
			     title: "氢启健康商城",
			     path: `/pages/index/index`
			   }
			 },

		onLoad() {
			this.init(); 
		},
		methods: {
			confirmOrder(e){
				var arr=[e]
				uni.navigateTo({
					url:`../confirmOrder/confirmOrder?list=${JSON.stringify(arr)}&orderFrom=2`
				})
			},
			hanldeAddCar(e){
				var obj={wares:{id:Number(e.orderId)},model:{id:e.modelId},count:e.count}
				api.SM_SHOPPING_CART_SAVE(JSON.stringify(obj)).then((res)=>{
					 if(res.data.header.result_code==0){
						 this.showSku=false;
						 uni.showTabBar();
						 this.showCarNumber();
						 uni.showToast({
						 	title: "添加成功！",
						 	icon:'success',
						 	duration:2000
						 })  
					 }
				})
			},
			showCarNumber(){
				var obj={nowPage: 1, pageSize: 9999, startRecord: 0, parameters: {}, condition: {oredCriteria: [[]]}}
				api.SM_SHOPPING_CART_LIST(JSON.stringify(obj)).then((res)=>{
					var list=res.data.body.exhibitDatas.filter(item=>item.model.stock>0);
					  if(list.length>0){
						  uni.setTabBarBadge({
						    index: 1,
						    text: String(list.length),
						  })
					  }
				})
			},
		  async init(){
			 await uni.login().then((res)=>{
					console.log(res)
					let obj={}
					obj.code=res[1].code
					obj.key="ZHQQ_SM"
				    api.login(JSON.stringify(obj)).then((res)=>{
						 uni.setStorageSync("phone",res.data.body.phone)
						 this.phone=res.data.body.phone
						 this.openid=res.data.body.openId
						 uni.setStorageSync("openid",res.data.body.openId)
							 var obj={nowPage: 1,pageSize: 9999,parameters: {},startRecord: 0,
							 condition:{ oredCriteria:[[{compareOperator: "Equal",dataType: {type: "Number"},property: "state",queryType: "Equal",value: "1"}]]}
							 };
						api.BIZ_BANNER_SELECT_LIST_BY_TYPE(JSON.stringify(3)).then((res)=>{
								this.list=res.data.body
							});
						if(res.data.body.uUID&&this.phone){
							api.BIZ_USER_PROFILE_SELECT_BY_USER_ID().then((res)=>{
								if(res.data.body.isTest){
									api.CLIENT_SM_WARES_OF_TEST_LIST( JSON.stringify(obj) ).then((res)=>{
										 this.commodityList=res.data.body.exhibitDatas
									})
								}
								else {
									api.SM_WARES_LIST( JSON.stringify(obj) ).then((res)=>{
											 this.commodityList=res.data.body.exhibitDatas
										})
								}
							});
							
						}
						else {
							api.SM_WARES_LIST( JSON.stringify(obj) ).then((res)=>{
									 this.commodityList=res.data.body.exhibitDatas
								})
						}
						if(uni.getStorageSync("uUID")&&uni.getStorageSync("phone")){
							setTimeout(()=>{this.showCarNumber();},500);
						}
					}).catch(()=>{uni.hideTabBar()})
				})
			},
			openSku(id){
				if(uni.getStorageSync("uUID")){
								if(uni.getStorageSync("phone")){
									this.showSku=true;
									uni.hideTabBar();
									this.$refs.sku.init(id);	
								}
								else {
									this.showDialogPhone=true
									uni.hideTabBar()
								}
				}
				else {
								   this.showDialogUuid=true
								   uni.hideTabBar()
				}
			},
			closePopup(){
					  this.showSku=false,
					  uni.showTabBar();
			},
			hanldeSwiperClick(index,item){
				if(uni.getStorageSync("uUID")){
					if(uni.getStorageSync("phone")){
						if(item.linkUrl){
							const id = item.linkUrl.replace(/[^\d]/g, " ");
							uni.navigateTo({
								url:`../detail/detail?id=${id}`
							})
						}
					}
					else {
						this.showDialogPhone=true
						uni.hideTabBar()
					}
				}
				else {
					this.showDialogUuid=true
					uni.hideTabBar()
				}
				
			},
			handleClickCanclePhone(){
				this.showDialogPhone=false
				uni.showTabBar()
			},
			handleClickCancleUuid(){
				this.showDialogUuid=false
				uni.showTabBar()
			},
			goDetail(i){
					uni.navigateTo({
						url:`../detail/detail?id=${i}`
					})
			},
			
           bindgetuser(){
			    	uni.getUserProfile({desc:"信息将用于服务",lang:"zh_CN"}).then((res)=>{
			    		  if(res[1]){
			    			   uni.setStorageSync("userInfo",res[1].userInfo)
			    			   let userinfo=res[1].userInfo
							   console.log(this.openid);
			    			 userinfo.openId=this.openid
			    			 userinfo.signature=res[1].signature
			    	    userinfo.encryptedData=res[1].encryptedData
			    		 userinfo.iv=res[1].iv
						 userinfo.key="ZHQQ_SM"
			    		 console.log(userinfo)
			    		api.register(JSON.stringify(userinfo)).then((res)=>{
			    			  uni.showTabBar()
			    		      this.showDialogUuid=false
						      this.getHomeData()
			    	 }).catch((res)=>{
			    					  })
			            }else {
			    								  uni.showToast({
			    								    title: '拒绝授权将无法正常使用哦',
			    								    icon: 'none',
			    								    duration: 2000
			    								  })
			    							  }
			    			}) 
		   }
		}
	}
</script>

<style lang="scss" scoped>
	.shopping-cart{
		float: right;
		position: absolute;
		right: 10px;
	}
	.cost-price{
		max-width: 140rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		    color: #aaa;
		    font-size: 3vw;
		    text-decoration: line-through;
		    overflow: hidden;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    margin-right: calc(10px + 6.5vw);
	}
	.now-price{
		max-width: 140rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		  color: #ff3434;
		    font-weight: 600;
		    font-size: 4.2vw;
		    overflow: hidden;
		    white-space: nowrap;
		    text-overflow: ellipsis;
	}
	.item-price{
		    width: 320rpx;
		    display: flex;
			flex-direction: row;
		    position: relative;
		    align-items: baseline;
		    padding: 0 1.5vw 0 1.5vw;
	}
	.item-name{
		font-size: 4vw;
		font-weight: 600;
		margin: 2vw 0rpx;
		max-width: 320rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.item-img{
		width: 320rpx;
		height: 280rpx;
		border-radius: 10px 10px 0 0;
	}
	.contain-div-item{
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background: #fff;
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
	}
	.contain-div{
		box-sizing: border-box;
		padding: 0 40rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.home-banner{
		width: 690rpx;
		height: 106rpx;
		margin: 30rpx 0rpx;
	}
	.line-xian{
		width: 1rpx;
		height: 100%;
		background: #a3a3a3;
	}
	.btn-cancle{
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}
	.btn-div{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 100rpx;
	}
	.content-title{
		width: 100%;
		text-align: center;
		padding-top: 40rpx;
		margin-bottom: 40rpx;
		font-size: 36rpx;
		color: #000000;
		font-weight: 500;
	}
	.content-text{
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		color: #303133;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #a3a3a3;
	}
	 button::after { border: none; }
	.content-button{
	  width: 50%;
	  height: 100rpx;
	  line-height: 100rpx;
	  text-align: center;
	  font-size: 30rpx;
	  color: #303133;
	  background-color:#FFFFFF;
	}
	.wrap {
        width: 100vw;
		padding: 0 35rpx;
		margin-top: 30rpx;
	}
	
	.content {
		width: 100vw;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: rgb(245,247,249);
	}
</style>
